<template>
  <el-dialog v-if="load" :close-on-click-modal="false" title="物流信息" v-model="visible" append-to-body width="800px" @close="handleClose">
    <el-tabs v-model="activeName" style="min-height: 300px;">
      <el-tab-pane v-for="da in data" :key="da" :label="da" :name="da">
        <template #label>
          <span class="flex items-center gap-2">
            <i v-if="loadings[da]" class="dk-iconfont icon-Loading animate-spin" />
            <span>{{da}}</span>
          </span>
        </template>
        <template v-if="form[da]">
          <el-timeline>
            <el-timeline-item v-for="(d, i) in form[da].track_data" :key="i" :timestamp="d.accept_time" type="info">
              {{ d.remark }}
            </el-timeline-item>
          </el-timeline>
        </template>
      </el-tab-pane>
    </el-tabs>
    <template #footer>
      <el-button @click="close">关 闭</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import api from '../api'
const load = ref(false)
const visible = ref(false)
let loadings = reactive({})
const form = ref({})

const emit = defineEmits(['close', 'success'])

// 打开弹窗
const activeName = ref()
const data = ref([])
const open = async (tracking_nos) => {
  if (!load.value) {
    load.value = true
    await 1
  }
  form.value = {}
  activeName.value = null
  await nextTick()
  data.value = tracking_nos
  activeName.value = tracking_nos[0]
  loadings = reactive({})
  visible.value = true
}

const getData = (tracking_no) => {
  if (!tracking_no || form.value[tracking_no]) return
  loadings[tracking_no] = true
  api.logistics({ tracking_no }).then(res => {
    form.value[tracking_no] = res
  }).finally(() => {
    loadings[tracking_no] = false
  })
}

watch(() => activeName.value, getData)

// 关闭弹窗
const close = () => {
  visible.value = false
}

const handleClose = () => {
  emit('close')
}

defineExpose({ open })
</script>